import React, {
	Component
} from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import {
	Tabs,
	Tools,
	TabBar,
	Icon
} from 'weaver-mobile';
import MyAttendance from "./my/MyAttendance.js";
import Subordinate from "./subordinate/Subordinate.js";
import Sign from "../sign/index.js";
import '../../style/myAttendance.less';
const getLabel = Tools.getLabel;

@inject('myAttendanceStore')
@observer
export default class Main extends Component {
	constructor(props) {
		super(props);

		this.tabs = [{
			title: getLabel(513095, "我的考勤"),
			sub: '1'
		}, {
			title: getLabel(513282, "下属考勤"),
			sub: '2'
		}];
	}

	componentDidMount() {
		this.props.history.push("/myAttendance");
	}

	componentWillMount() {
		const {
			changeTitle,
		} = this.props.myAttendanceStore;

		changeTitle(getLabel(513098,"考勤打卡"));
	}

	render() {
		const {
			myAttendanceStore
		} = this.props, {
			selectedTab,
			handleFirstBarPress,
			handleSecondBarPress,
			handleTabClick,
		} = myAttendanceStore;

		return (
			<div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 } } className="hrm-sign-attendance">
				<TabBar
		          unSelectedClassName={'unselected-tint-color'}
		        >
		        	<TabBar.Item
			            title={getLabel(513098,"考勤打卡")}
			            key="sign"
			            icon={<Icon type={'position'}/>}
			            selectedIcon={<Icon type={'position'} />}
			            selected={selectedTab === 'firstTab'}
			            onPress={handleFirstBarPress}
			            data-seed="logId"
			          >
			          	{(selectedTab === 'firstTab') && <Sign tabBarHeight={50}/>}
			          </TabBar.Item>
			          <TabBar.Item
			            title={getLabel(513095,"我的考勤")}
			            key="attendance"
			            icon={<Icon type={'calendar'}/>}
			            selectedIcon={<Icon type={'calendar'} />}
			            selected={selectedTab === 'secondTab'}
			            onPress={handleSecondBarPress}
			            data-seed="logId1"
			          >		
			          	{(selectedTab === 'secondTab') && (
			          		<Tabs 
								tabs={this.tabs}
						        initialPage={0}
						        swipeable={false}
						        onChange={(tab, index) => handleTabClick(tab,index)}
							>
								<MyAttendance {...this.props}/>
								<Subordinate store={myAttendanceStore} {...this.props}/>
							</Tabs>
			          	)}
			          </TabBar.Item>
        		</TabBar>
			</div>
			
		);
	}
}